Properties
需要注意是回傳節點還是元素，如果是回傳元素則可以使用el.style改變CSS style。
.parentNode- 回傳此節點的父節點.childNodes- 回傳此節點的子節點.parentElement- 回傳此節點的父元素.nextSibling- 回傳此節點的下一個sibling節點.previousSibling- 回傳此節點的前一個sibling節點.nextElementSibling- 回傳此節點的下一個sibling元素.previousElementSibling- 回傳此節點的前一個sibling元素
Methods
插入DOM Node方法：
ParentNode.append()（IE不支持） -
在此ParentNode的末尾子節點後，插入節點物件或DOMString物件ParentNode.prepend()（IE不支持） -
在此ParentNode中的最前端子節點前，插入節點物件或DOMString物件Node.appendChild()-
在此元素的子節點末尾，插入一個節點。Node.insertBefore()-
在參考節點前插入一個擁有指定父節點的子節點。Element.insertAdjacentHTML()-
插入HTML字串到DOM節點的特定位置。Element.insertAdjacentElement()-
插入element到DOM節點的特定位置。
➤ ParentNode.append()
參數可以輸入數個node或DOMStrings。
語法：
ParentNode.append(...nodes Or DOMStrings)
範例：將連結句子"Google"改成"Google Link"（不使用textContent的情況下）
let href = document.querySelector('#href');
href.append(' Link');
➤ ParentNode.prepend()
參數可以輸入數個node或DOMStrings。
語法：
ParentNode.prepend(...nodes Or DOMStrings);
範例：將連結句子"Google"改成"Go to Google"，"Go to"要是h1大小。
let h1 = document.createElement('h1');
h1.textContent = 'Go to'
let href = document.querySelector('#href');
href.prepend(h1);
➤ ParentNode.appendChild()
參數只能輸入一個節點。
語法：
element.appendChild(a Child Node)
範例：增加新的CSS style，將連結顏色改為tomato、粗細900。
let style = document.createElement('style');
style.innerHTML = `#href {color:tomato; font-weight:900}`
document.head.appendChild(style)
➤ Node.insertBefore()
需要注意，如果不是用createElement()新建立一個node，而是用舊有node作為newNode的話，node不會被複製，而是會位移到新位置。
語法：
parentNode.insertBefore(newNode, referenceNode);
以下所有範例使用的HTML檔：
<body>
<ul>
<li><a id="google" href="https://www.google.com/">Google</a></li>
<li><a id="youtube" href="https://www.youtube.com/">Youtube</a></li>
</ul>
</body>
範例：將"Youtube"此行連結移至"Google"前
//Select parentNode、google、youtube
let parentNode = document.querySelector('ul');
let google = document.querySelectorAll('li')[0];
let youtube = document.querySelectorAll('li')[1];
//將youtube插入google之前
parentNode.insertBefore(youtube, google);
//youtube被位移到google之前
➤ Element.insertAdjacentHTML()
➤ Element.insertAdjacentElement()
//Element.insertAdjacentHTML()
element.insertAdjacentHTML(position, text);
//Element.insertAdjacentElement()
element.insertAdjacentElement(position, element);
參數：
- position
beforebegin: 在元素之前。afterend: 在元素之後。afterbegin: 在元素裡面，第一個子元素之前。beforeend: 在元素裡面，最後一個子元素之後。
使用Element.insertAdjacentHTML()
範例：在google列點後插入一個twitter連結；在youtube後插入一個fb連結
let google = document.querySelectorAll('li')[0];
//Create text
let twitter = '<li><a id="twitter" href="https://twitter.com/">Twitter</a></li>'
let fb = '<li><a id="fb" href="https://www.facebook.com/">Facebook</a></li>'
//Use insertAdjacentHTML()
google.insertAdjacentHTML('afterend', twitter);
//Select element(因為前面增加新的li)
let youtube = document.querySelectorAll('li')[2];
//Use insertAdjacentHTML()
youtube.insertAdjacentHTML('afterend', fb);
使用Element.insertAdjacentElement()
範例：順序由上到下改為Twitter => Google => Facebook => Youtube
//Select element
let google = document.querySelector('li');
//Create element
let twitter = document.createElement('li');
twitter.innerHTML = '<a id="twitter" href="https://twitter.com/">Twitter</a>'
//Use insertAdjacentElement()
google.insertAdjacentElement('beforebegin', twitter)
//Select element
let ul = document.querySelector('ul');
//Create element
let fb = document.createElement('li');
fb.innerHTML = '<a id="fb" href="https://www.facebook.com/">Facebook</a>'
//Use insertAdjacentElement()
ul.insertAdjacentElement('beforeend', fb)
Node.appendChild()與ParentNode.append()的差異
Node.appendChild()目前各瀏覽器都有支援，而IE目前不支援ParentNode.append()。Node.appendChild()參數只接受節點物件，ParentNode.append()還額外接受DOMString物件。Node.appendChild()會返回節點物件，ParentNode.append()則不會回傳值。Node.appendChild()只能附加一個節點，而ParentNode.append()則可一次附加多個節點與字串。
複製DOM Node方法：
Node.cloneNode()-
在此元素的子節點末尾，插入一個節點。
語法：
let newClone = node.cloneNode([deep])
- deep
true: 深層複製，此節點的後代節點都會一起被複製false: 只複製此節點本身。false為預設參數。
範例：複製ul並插入在原ul底下
//select the ul element
let ul = document.querySelector('ul');
//clone the node
let cloneNode = ul.cloneNode(true);
//change id（因為複製，會連原本的id都複製，但每個id的名字都要不同）
cloneNode.id = 'link-2';
//insert the node
document.body.appendChild(cloneNode);
移除DOM Node方法：
Node.removeChild()-
從DOM中移除一個子節點，並返回被移除的節點。ChildNode.remove()-
從DOM中移除物件（IE不支援，萬惡的IE....）
➤ Node.removeChild()
➤ ChildNode.remove()
語法：
//Node.removeChild()
node.removeChild(child);
//ChildNode.remove()
node.remove();
使用Node.removeChild()
範例：移除第一個li
//注意：因為移除的是子節點，所以前面的node要先返回父元素/父節點
let firstLink = document.querySelector('li');
firstLink.parentElement.removeChild(firstLink)
使用ChildNode.remove()
範例：移除第二個li
let secondLink = document.querySelectorAll('li')[1];
secondLink.remove(secondLink);
替換DOM Node方法：
ChildNode.replaceWith()-
將子節點替換成其他node或DOMString
➤ ChildNode.replaceWith()
語法：
ChildNode.replaceWith((Node or DOMString)... nodes);
範例：把第一個li替換成空白li
let firstLink = document.querySelector('li');
let emptyLi = document.createElement('li');
firstLink.replaceWith(emptyLi)
參考資料
